<template>
    <div class="inputNumber">
      <button class="cell" @click="handleReduce">-</button>
      <span class="cell">{{number}}</span>
      <button class="cell" @click="handleAdd">+</button>
    </div>
  
  </template>
  <style scoped>
  .inputNumber{
      padding: 0.63rem 0;
      text-align: left;
      color: #222;
  }
  .inputNumber button{
      color: #03a9f4;
      background-color: #fff;
      font-size: 1.1rem;
      border: none
  }
  
  </style>
  <script>
    export default {
        data(){
            return{
              number:1,
            }
        },
       
        methods:{
          handleReduce(){
              if(this.number>1){
              this.number--}
          },
          handleAdd(){
              if(this.number<99){
              this.number++}
          },
      
        } ,
      
  
    };
  </script>
  